<template>
  <a-card hoverable>
    <template slot="title">
      <span class="back" @click="goBackPool"><{{$t('Back')}}</span>
      <span style="margin: 0 10px">|</span>
      <span>{{$t('Overview')}} / {{$t('Cache-pool-detail')}}</span>
    </template>
    <div style="margin:0 0 1em 0 ">
      <div class="cache-pool-name">{{$t('Cache-pool-name')}}：<span>{{currentCachePool.name}}</span></div>
      <div v-if="$store.state.language=='zh'">本存储池一共由<span class="num">{{currentCachePool.disk_infos.length}}块</span>物理磁盘组成，详情如下：</div>
      <div v-else>This storage pool is composed of <span class="num">{{currentCachePool.disk_infos.length}}</span> physical disks in total. Details are as follows:</div>
      <div class="top-tip">
        <a-row>
          <a-col :span="$store.state.language=='zh'?21:20" v-if="$store.state.language=='zh'">
            <div class="desc-text">
              <img src="../../../../../static/images/disk_check/16_f_ic_proportion.png" alt="proportion_img"/>
              当前缓存池数据占比：<span class="value-text">{{currentCachePool.used_percent}}%</span>
            </div>
            <div class="desc-text" style="padding-left:19.5px">当缓存池数据占比达到 <span class="value-text">{{currentCachePercent}}%</span> 时，自动将数据写入数据盘。</div>
          </a-col>
          <a-col :span="$store.state.language=='zh'?21:20" v-else>
            <div class="desc-text">
              <img src="../../../../../static/images/disk_check/16_f_ic_proportion.png" alt="proportion_img"/>
              Current proportion of cache pool data:<span class="value-text">100%</span>
            </div>
            <div class="desc-text" style="padding-left:19.5px">When the proportion of cache pool data reaches <span class="value-text">{{currentCachePercent}}%</span> the data is automatically written to the data disk.</div>
          </a-col>
          <a-col :span="$store.state.language=='zh'?3:4" v-userAuth="'D2-6'">
            <a-button type="primary" class="set-cache-btn" @click="setCacheStrategy">
              <img src="../../../../../static/images/disk_check/16_f_ic_set_white.png" alt="set_img" />{{$t('Set-cache-pool-policy')}}
            </a-button>
          </a-col>
        </a-row>
      </div>
    </div>
    <a-row :gutter="16">
      <a-col span="8" v-for="item in currentCachePool.disk_infos" :key="item.disk_id">
        <div class="each-disk">
          <a-row style="width:100%">
            <a-col span="7">
              <a-progress type="circle" :percent="item.used_percent" :width="80">
                <template #format="percent">
                  <div class="each-disk-dec">{{ percent }}%</div>
                  <div>{{$t('Usage-rate')}}</div>
                </template>
              </a-progress>
            </a-col>
            <a-col span="17">
              <div v-if="$store.state.language=='zh'" class="each-disk-dec">{{item.name}}，{{diskTypeMap.get(item.type) }}，总空间：{{item.total}}</div>
              <div v-else class="each-disk-dec">{{item.name}}，{{ diskTypeMap.get(item.type) }}，Total space:{{item.total}}</div>
              <!-- 置为未激活 -->
              <a-button v-userAuth="'E5-4'" style="margin:12px 0" type="primary" @click="releaseData(item)">{{$t('Release')}}</a-button>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <!--设置缓存池策略-->
    <a-modal
      :visible="setCache_dialog"
      :title="$t('Set-cache-pool-policy')"
      :maskClosable='false'
      @cancel="handleCancel"
      v-dragModal
    >
      <div>
        <div v-if="$store.state.language=='zh'">
          当缓存池数据占比达到 <a-input v-model="cacheStrategyValue" @change="percentInputChange" style="width:15%;margin:0 5px"></a-input> %时，自动将数据写入数据盘。
        </div>
        <div v-else>When the proportion of cache pool data reaches <a-input v-model="cacheStrategyValue" @change="percentInputChange" style="width:15%;margin:0 5px"></a-input> %, the data is automatically written to the data disk.</div>
        <transition name="show-fade">
          <div v-show="isShowTip" class="tip-text">
            <span v-if="$store.state.language=='zh'">只能输入0~90的整数</span>
            <span v-else>Only integers from 0 to 90 can be entered</span>
          </div>
        </transition>
      </div>
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          {{$t('Cancel')}}
        </a-button>
        <a-button key="submit" type="primary" @click="handleSave" :disabled="isDisabledSave" :loading="saveLoading">
          {{$t('Save')}}
        </a-button>
      </template>
    </a-modal>

    <!--释放数据 暂时没用-->
    <a-modal
      :visible="visible"
      :maskClosable='false'
      @cancel="handleCancel2"
      v-dragModal
    >
      <template slot="title">
        <img class="error-img" src="../../../../../static/images/disk_check/16_f_ic_unsure.png" alt="error_img"/>
        <span class="weight">{{$t('Release-and-set2')}}</span>
      </template>
      <div v-if="$store.state.language=='zh'" style="color:#333">
        释放数据后，该磁盘上的数据将由系统分配到其他缓存盘，您可到节点信息页面找到本磁盘。
        <div>
          <span class="font-red">此操作为危险操作，一旦误删，可能会导致系统崩溃或数据丢失，请谨慎操作！</span>
          如您确定要进行操作，请输入以下文字后点击确定。
        </div>
      </div>
      <div v-else style="color:#333">
        After releasing the data, the data on this disk will be allocated to other cache disks by the system. You can find this disk on the node information page.
        <div>
          <span class="font-red">This operation is a dangerous operation. Once it is deleted by mistake, it may lead to system crash or data loss. Please operate with caution!</span>
          If you are sure to operate, please enter the following text and click OK.
        </div>
      </div>
      <div class="sure-text">{{$t('Know-and-continue')}}</div>
      <a-input v-model="confirmValue" :placeholder="$t('Enter-top-text')"></a-input>
      <template slot="footer">
        <a-button key="back" @click="handleCancel2">
          {{$t('Cancel')}}
        </a-button>
        <a-button key="submit" type="primary" @click="handleOk" :disabled="(confirmValue=='我已知情，确定要继续操作！' || confirmValue=='I have been informed and am sure to continue!')?false:true">
          {{$t('Sure')}}
        </a-button>
      </template>
    </a-modal>
  </a-card>
</template>

<script>
import request from '@/request/request'

export default {
  name: "CacheDetail",
  props: ['currentCachePool'],
  data() {
    return {
      visible: false,
      confirmValue: '',
      setCache_dialog: false,
      cacheStrategyValue: this.currentCachePool.cache_percent,
      currentCachePercent: this.currentCachePool.cache_percent,
      cacheStrategyValue_copy: 0,
      isShowTip: false,
      isDisabledSave: false,
      saveLoading: false,
      isShow: false,
      diskTypeMap: new Map([
        [0, 'SSD'],
        [1, 'HDD'],
        [2, 'NVMe']
      ]),
    }
  },
  mounted() {
    
  },
  methods: {
    //返回存储池表格
    goBackPool() {
      this.$emit('showPool')
    },

    //置为未激活，释放数据
    releaseData(item) {
      this.$store.commit('goToOsd', {
        type: 'noActive',
        currentData: item.disk_id
      })
      this.$router.push('/diskmgr');
      // this.visible = true;
    },

    //打开设置缓存池策略
    setCacheStrategy() {
      this.setCache_dialog = true;
      this.cacheStrategyValue = this.currentCachePool.cache_percent;
    },

    //确定提交保存缓存池策略
    handleSave() {
      this.saveLoading = true;
      request('post', 'pool/tier/setCache',{
        pool_id: this.currentCachePool.id,
        percent: this.cacheStrategyValue
      }).then(res => {
        // console.log('设置缓存池策略', res)
        this.model(res.data.id) //返回模板
        this.notice(res.data.id, res.data.params, res.data.flag) //通知列表显示
        this.setCache_dialog = false;
        this.saveLoading = false;
        if(res.data.flag == 0) {
          this.currentCachePercent = this.cacheStrategyValue;
          this.$emit('updateCacheData',this.currentCachePool);
        }
      }).catch(err => {
        console.log(err);
      })
    },

    //取消设置缓存池策略
    handleCancel() {
      this.setCache_dialog = false;
      this.cacheStrategyValue = this.cacheStrategyValue_copy;
    },
    
    //缓存池百分比输入框改变监听
    percentInputChange() {
      let reg = /^(?:[1-8]?\d|90)$/;
      if(reg.test(this.cacheStrategyValue)) {
        this.isDisabledSave = false;
        this.isShowTip = false;
      }else {
        this.isDisabledSave = true;
        this.isShowTip = true;
      }
    },

    //确定释放数据
    handleOk() {
      
    },
    //取消释放
    handleCancel2() {
      this.visible = false;
      this.confirmValue = '';
    },
  }
}
</script>

<style scoped>
.back:hover {
  cursor: pointer;
  color: var(--themeColor);
}
.cache-pool-name {
  margin-bottom: 10px;
  font-size: 16px;
  color: #666;
}
.cache-pool-name span {
  color: #333;
  font-weight: 700;
}
.top-tip {
  padding: 6px 0px 2px 20px;
  background-color: #f1f6fa;
}
.desc-text {
  color: #666;
}
.value-text {
  color: #333;
  font-weight: 700;
}
.set-cache-btn {
  margin: 10px 0;
}
.set-cache-btn img {
  vertical-align: sub;
  margin-right: 2px;
}
.num {
  color: var(--themeColor);
  font-weight: 700;
}
.each-disk {
  display: flex;
  align-items: center;
  width: 100%;
  height: 120px;
  padding: 0 15px;
  background-color: #f1f6fa;
  margin-bottom: 15px;
}
.each-disk-dec {
  color: #333;
}
.error-img {
  vertical-align: text-bottom;
  margin-right: 5px;
}
.weight {
  font-weight: 700;
}
.sure-text {
  text-align: center;
  color: var(--mainRedColor);
  font-weight: 700;
  padding: 4px 0;
  background-color: rgba(253, 52, 85, 0.1);
  border-left: 2px solid var(--mainRedColor);
  margin: 15px 0 10px;
}
.font-red,
.tip-text {
  color: var(--mainRedColor);
}
.show-fade-enter-active, .show-fade-leave-active {
  transition: opacity .5s;
}
.show-fade-enter, .show-fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
::v-deep.ant-modal-body {
  height: 101px;
}
::v-deep.ant-modal-footer button {
  width: 80px;
}
/* ::v-deep.ant-modal-footer .ant-btn-primary {
  background-color: var(--mainRedColor);
  border-color: var(--mainRedColor);
}
::v-deep.ant-modal-footer .ant-btn-primary[disabled] {
  color: rgba(0,0,0,.25);
  background-color: #f5f5f5;
  border-color: #d9d9d9;
} */
</style>
